﻿.ContentPlaceHolderMain {
    background-color: #E6E6E6;
}



.container {
    max-width: 1600px !important;
}
  
.sectionHeading {
    background-color: #1859A7; color: #FFFFFF;
    padding-left: 1em;
    font-size: 2em;
    line-height: 2;
    margin-bottom: 1em;
}

.sectionHeading a {
	color: white !important;
}

@media screen and (max-width: 425px) {
    h1.sectionHeading {
        font-size: 1.5em;
    }
}

section {
    margin-top: 3em;
}

.PreviousNextButtonsContainer a{
    font-size: 1.2em;
    font-weight: bolder;
    color: black !important;
    text-decoration: none !important;
}

.PreviousNextButtonsContainer a:hover{
    box-shadow: 3px 3px 4px;
}

.PreviousNextButtonsContainer a.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.separatorLine {
    border-bottom: 1px solid black; margin: 1em 0
}

/*** Main Slider Styles ***/
#mainSlider {
    background-color: lightgrey;
    /* height: 480px; */
    width: 100%;
}

#mainSlider .carousel-control-next-icon {
    background-image: url("https://www2.fsca.co.za/Style%20Library/Images/v2/arrow_next.png") !important;
}

#mainSlider .carousel-control-prev-icon {
    background-image: url("https://www2.fsca.co.za/Style%20Library/Images/v2/arrow_prev.png") !important;
}

#mainSlider .carousel-control-prev {
	justify-content: flex-start;
}
#mainSlider .carousel-control-next {
	justify-content: flex-end;
}

#mainSlider .carousel-control-next-icon, 
#mainSlider .carousel-control-prev-icon {
	height: 5em;
	width: 5em;
    opacity: 0.2;
}

#mainSlider a.carousel-control-prev:hover .carousel-control-prev-icon,
#mainSlider a.carousel-control-next:hover .carousel-control-next-icon{
    opacity: 0.8 !important;
    background-color: rgba(255, 250, 250, 0.726);
    border-radius: 50%;
}


/*** Commissioner's Corner Styles ***/
#commsCorner .commsLogo {
    max-width: 100%; 
    max-height: 20em; 
    border: 3px solid lightgrey;
}


#commsCorner .PreviousNextButtonsContainer {
    border-bottom: 1px solid #939598;
}

#commsCorner .commsCornerArticleContent a {
    text-decoration: none;
}

#commsCorner h5.commsCornerTitle{
    font-size: 1em;
    font-weight: bold;
    color: black;
    margin-top: 0.5em;
}

#commsCorner .commsCornerArticleDate{
    color: black;
    font-size: 0.8em;
    font-weight: bold;
}

#commsCorner .commsCornerArticleDescription {
    color: black;
}


/*** Financial Customers Styles ***/
.finCusItem {
    transition: box-shadow .3s;
    margin-bottom: 1em;
}

.finCusItem:hover {
    box-shadow: 0 0 11px rgba(33,33,33,.5);
}

.finCusItem img{
    max-width: 100%; object-fit: cover;
    max-height: 15em;
    min-height: 15em;
}

.finCusItem a { 
    text-decoration: none;
}

.finCusItemTitle {
    background-color: #002F3B; color: white; text-align: center; line-height: 4em;
}

a:has(.finCusItemTitle):hover{
    text-decoration: none;
}

@media only screen and (max-width: 991px) {
    .finCusItemTitle {
      font-size: 1em;
    }
  }

  @media screen and (max-width: 768px) {
    .finCusItem img {
        max-height: fit-content;
        
    }
  }
/*** Careers Section Styles ***/

.careersBox {
    background-color: #002F3B !important;
}

.careersBox .careersIntroTextInner {
    padding: 1em;
    color: white;
    font-size: 1.5em;
}

div:has(.careersImageBox){
    padding-left: 0;
    padding-right: 0;
}

.careersImageBox{
    height: 20em;
    background-image: url("/Style%20Library/Images/v2/Careers.jpeg");
    background-size: cover;
}

@media screen and (max-width: 768px){
    .sectionHeading {
        margin-top: 1em;
    }
    section {
        margin-top: 0;
    }
}


/*** Events Calendar Styles ***/
#EventsCalendarContainer img {width: 100%;}

#EventsCalendarContainer .eventsCalenderImageContainer {
    height: 13.8em;
    width: 100%;
    background-image: url("/Style%20Library/Images/v2/FSCA%20Events.jpg");
    background-size: cover;
    background-color: #cccccc;
}

#MediaReleaseArticles{
    overflow: hidden;
}

#MediaReleaseArticles a:hover {text-decoration: none;}

#MediaReleaseArticles .newsItemDiv {
    /* font-size: small; */
    padding: 1.8em;
    border-bottom: 1px solid black;
    font-size: 1.2em;
    
}

@media screen and (min-width: 968px) {
    #MediaReleaseArticles .newsItemDiv {
        height: 8.5em;
    }
}

#MediaReleaseArticles .newsItemDiv:last-child  {
    /* font-size: small; */
    border-bottom: 0px solid black;
}

#MediaReleaseArticles .newsItemDiv:first-child  {
    /* font-size: small; */
    border-top: 1px solid black;
}


/*** Thought Leadership Styles ***/
div.ThoughtLeadershipArticle:first-child {
    border-bottom: 1px solid black;
    
}

div.ThoughtLeadershipArticle{
    padding-bottom: 0.8em;
}

@media screen and (min-width: 968px) {
    div.ThoughtLeadershipArticle{
        height: 10.8em;
    }
}

@media screen and (max-width: 768px) {
    div.ThoughtLeadershipArticle{
        padding: 0.8em;
    }
}

div.ThoughtLeadershipArticle:last-child {
    padding-top: 0.8em;
}

.thoughtLeadershipRow .PreviousNextButtonsContainer {
    border-bottom: 1px solid black;
}

.ThoughtLeadershipTitle {
    font-size: 1em !important;
    font-weight: bold;
}
.ThoughtLeadershipTitle, .ThoughtLeadershiprArticleDescription {
    color: black !important;
}

/* #thoughtLeadershipArticles p.ThoughtLeadershiprArticleDescription {
    margin-bottom: 1.9em;
} */

/*** News Section Styles ***/ 

#newsContainer .sectionHeading {
    margin-bottom:0;margin-left: -1px;margin-right: -1px;margin-top: -1px;
}

#newsContainer nav ul {
    flex-wrap: wrap;
}

#newsContainer nav ul li {
    padding-right: 1em;
    padding-left: 1em;
    border-right: 3px solid white;
}

#newsContainer nav ul li:first-child{
    padding-left: 0;
}
#newsContainer nav ul li:last-child {
    border-right: none;
    padding-right: 0;
}

#newsContainer nav ul li a { font-size: 0.9em;}


.newsArticle{
    width: 100%;
    border-bottom: 1px solid black;
    padding-top: 0.3em;
    padding-bottom:0.5em;
    padding-left: 0 !important;
    margin-bottom: 1em;
    margin-left:0 !important;
    
}

@media screen and (min-width: 978px) {
    .newsArticle{
        height: 10.8em;
    }   
}

.newsArticle .col-md-6 {
    padding-left: 0;
}

.newsArticle:nth-last-of-type()
.newsArticle img { max-width: 100%;}


#newsScroller a {font-weight: bolder; color: black; text-decoration: none;}

#newsNavigator {
    background-color: #0C313A; color: white; font-size: medium; margin-top: 0.5em; padding:0.5em; text-align: center;
}

#newsNavigator a {
    color: white;
}

.LatestNewsNav a {
    font-weight: bold;
}

#newsContainer .PreviousNextButtonsContainer {
    border: 0;
}

#newsNavigator span{
    margin-left: 1em;
    margin-right: 1em;
}

#newsArticles .latestNewsTitle {
    color:black; font-size: 1em; font-weight: bold; padding: 0; 
    
}




#newsArticles .latestNewsArticleDate {
    font-size: 0.9em; color: rgba(0,0,0,.8);
}

#newsArticles .latestNewsrArticleDescription {
    color: black;
}

#newsArticles .newsArticle:last-child{
    border-bottom: none;
}

#latestNewsContainer .newsArticle {
    margin-bottom: 0;
}

#latestNewsContainer a:first-child .row{
    border-bottom: 1px solid black;
}

#latestNewsContainer a:nth-child(2) .row{
    padding-top: 1em;
}


#latestNewsContainer .imageBox {
    padding-left: 0;
}
@media screen and (max-width: 786px) {
    #latestNewsContainer .imageBox{
        padding-left:2px;
        padding-right: 2px;
    }
}

#newsArticles .PreviousNextButtonsContainer {
    border-bottom: 1px solid black;
}

#newsArticles .latestNewsLogo {
    height: 8em !important;
}

@media screen and (max-width: 900px)  {
    .thoughtLeadershipRow .sectionHeading{
        margin-top: 1em;
    }
}

#modalsSection .modal-header{
    background-color: #0C313A;color: white; font-size: 0.8em;
}

#modalsSection .modal-header button{
    color: white; 
}




